Pure.CSS একটি ছোট, হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক, যা ওয়েব ডেভেলপমেন্টের জন্য সহজে রেসপন্সিভ এবং সুন্দর ফর্ম ডিজাইন তৈরি করতে সহায়তা করে। Form Grids এবং Responsive Form Design এর জন্য Pure.CSS প্রি-বিল্ট স্টাইলিং প্রদান করে, যা ফর্মের জন্য একটি সহজ এবং আকর্ষণীয় লেআউট তৈরি করতে সাহায্য করে।
১. Form Grids with Pure.CSS:
Pure.CSS ব্যবহার করে আপনি ফর্মের জন্য গ্রিড সিস্টেম তৈরি করতে পারেন। এটি ফর্ম এলিমেন্টগুলিকে সুষমভাবে সাজাতে সাহায্য করে, যাতে ফর্মটি সহজে পড়া যায় এবং ইন্টারঅ্যাক্ট করা যায়।
উদাহরণ: Form Grids in Pure.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Form Grids with Pure.CSS</title>
<style>
.form-container {
width: 60%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="form-container">
<form class="pure-form pure-form-aligned">
<fieldset>
<legend>Contact Form</legend>
<div class="pure-control-group">
<label for="name">Full Name</label>
<input id="name" type="text" placeholder="Your Name">
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Your Email">
</div>
<div class="pure-control-group">
<label for="message">Message</label>
<textarea id="message" placeholder="Your Message"></textarea>
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- pure-form-aligned: এটি Pure.CSS এর একটি ক্লাস যা ফর্ম এলিমেন্টগুলোকে একসাথে সুন্দরভাবে সাজায়, যাতে ইনপুট ফিল্ড এবং লেবেল এক সোজা লাইনে থাকে।
- pure-control-group: এই ক্লাসটি প্রতিটি ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়, যা ইনপুট এলিমেন্ট এবং তার লেবেলকে একটি গ্রুপে রাখে।
- pure-controls: এটি ফর্মের সাবমিট বাটন এবং অন্যান্য নিয়ন্ত্রণ উপাদানগুলিকে স্টাইল করে।
২. Responsive Form Design with Pure.CSS:
Pure.CSS এর মাধ্যমে আপনি সহজেই রেসপন্সিভ ফর্ম ডিজাইন করতে পারেন, যা বিভিন্ন ডিভাইসে (মোবাইল, ট্যাবলেট, ডেস্কটপ) সুন্দরভাবে দেখাবে। Pure.CSS এর গ্রিড সিস্টেম এবং ক্লাসগুলি ওয়েব ফর্মকে ডিভাইসের আকার অনুসারে স্বয়ংক্রিয়ভাবে মানিয়ে নিতে সাহায্য করে।
উদাহরণ: Responsive Form Design
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Responsive Form Design</title>
<style>
.form-container {
width: 80%;
max-width: 600px;
margin: 0 auto;
}
.pure-form {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
}
.pure-control-group {
margin-bottom: 15px;
}
.pure-button {
width: 100%;
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="form-container">
<form class="pure-form pure-form-aligned">
<fieldset>
<legend>Registration Form</legend>
<div class="pure-control-group">
<label for="first-name">First Name</label>
<input id="first-name" type="text" placeholder="First Name">
</div>
<div class="pure-control-group">
<label for="last-name">Last Name</label>
<input id="last-name" type="text" placeholder="Last Name">
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="phone">Phone Number</label>
<input id="phone" type="tel" placeholder="Phone Number">
</div>
<div class="pure-control-group">
<label for="message">Message</label>
<textarea id="message" placeholder="Your Message"></textarea>
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- Responsive Design: Pure.CSS এর ব্যবহার ইমেজ, ফন্ট, এবং অন্যান্য উপাদানগুলোকে স্বয়ংক্রিয়ভাবে রেসপন্সিভ বানিয়ে দেয়, যাতে ওয়েব পেজটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে দেখা যায়।
- pure-button: এই ক্লাসটি বাটনটিকে পূর্ণ প্রস্থে প্রদর্শন করে এবং ব্যবহারকারীর জন্য এটি আরও দৃশ্যমান এবং সহজলভ্য হয়।
- max-width: এখানে
max-widthপ্রপার্টি ব্যবহার করা হয়েছে, যা ফর্মের প্রস্থকে সর্বোচ্চ 600px পর্যন্ত সীমাবদ্ধ করে, যাতে বড় স্ক্রীনে এটি অতিরিক্ত বিস্তৃত না হয়ে যায়। - margin: 0 auto: এটি ফর্মের কন্টেইনারটিকে হরিজেন্টালি সেন্টার করে দেয়।
৩. Grid Layout for Forms:
Pure.CSS গ্রিড সিস্টেম ব্যবহার করে আপনি আপনার ফর্ম উপাদানগুলিকে আরও সুষমভাবে সাজাতে পারেন।
উদাহরণ: Grid Layout for Form Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Form Grid Layout</title>
<style>
.form-container {
width: 70%;
margin: 0 auto;
}
.pure-g {
margin-top: 20px;
}
.pure-u-1-2 {
padding: 10px;
}
</style>
</head>
<body>
<div class="form-container">
<form class="pure-form">
<fieldset>
<legend>Grid Based Form</legend>
<div class="pure-g">
<div class="pure-u-1-2">
<label for="name">Full Name</label>
<input id="name" type="text" placeholder="Your Name">
</div>
<div class="pure-u-1-2">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Your Email">
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<label for="phone">Phone Number</label>
<input id="phone" type="tel" placeholder="Your Phone Number">
</div>
<div class="pure-u-1-2">
<label for="message">Message</label>
<textarea id="message" placeholder="Your Message"></textarea>
</div>
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- pure-g: এটি Pure.CSS এর গ্রিড সিস্টেমের একটি ক্লাস, যা ফর্মের উপাদানগুলোকে গ্রিডের মধ্যে সাজাতে সাহায্য করে।
- pure-u-1-2: এটি গ্রিড কলামের জন্য ব্যবহৃত ক্লাস, যেখানে
1-2অর্থ হল প্রতিটি উপাদান ফর্মের 50% প্রস্থ নিবে।
Pure.CSS এর গ্রিড সিস্টেম এবং প্রি-বিল্ট ক্লাসগুলি আপনাকে সহজে Responsive Forms এবং Form Grids তৈরি করতে সহায়তা করে। আপনি এই ক্লাসগুলো ব্যবহার করে ফর্মের ডিজাইনকে আরো সুন্দর এবং রেসপন্সিভ করতে পারেন, যাতে এটি সমস্ত ডিভাইসে সুন্দরভাবে প্রদর্শিত হয়।
Content added By
Read more
